<template>
  <el-row align="middle" :gutter="10">
    <el-col :span="4">环境</el-col>
    <el-col :span="14">
      <el-select v-model="environment" @change="handleChangeEnvironment">
        <el-option label=" " value="null" />
        <el-option label="EQUIRECT" value="EQUIRECT" />
        <!-- <el-option label="MODELVIEWER" value="MODELVIEWER" /> -->
      </el-select>
    </el-col>
    <el-col :span="6">
      <BUpload
        v-if="environment === 'EQUIRECT'"
        v-model="equirectPath"
        @change="handleChangeEquirect"
      ></BUpload>
    </el-col>
  </el-row>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import { useViewportStore } from '@renderer/stores/viewport'
import { storeToRefs } from 'pinia'
import BUpload from '@renderer/components/b-upload.vue'
import useTexture from '@renderer/utils/useTexture'
import { EquirectangularReflectionMapping } from 'three'

const environment = ref(' ')
const equirectPath = ref('')
const viewportStore = useViewportStore()
const { scene } = storeToRefs(viewportStore)

async function handleChangeEnvironment(option: string) {
  if (scene.value) {
    scene.value.environment = null
    switch (option) {
      case 'EQUIRECT':
        if (equirectPath.value) {
          const texture = await useTexture(equirectPath.value)
          texture.mapping = EquirectangularReflectionMapping
          scene.value.environment = texture
        }
        break
    }
  }
}

async function handleChangeEquirect(url: string) {
  equirectPath.value = url
  if (scene.value) {
    const texture = await useTexture(url)
    texture.mapping = EquirectangularReflectionMapping
    scene.value.environment = texture
  }
}
</script>
<style lang="scss" scoped></style>
